import { Component } from 'react'
import { observer, inject } from 'mobx-react'
@inject('todo')
@observer

class AddTodo extends Component {
  // 添加任务
  addTodo(e){
    const { todoAdd } = this.props.todo
    // 判断用户敲击的是否是回车键
    if(e.key === 'Enter') {
      // 获取用户在文本框中输入的内容
      const taskName = e.target.value
      if(taskName.trim().length < 1) return
      // 添加任务到列表数据中
      todoAdd(taskName)
      // 清空文本框内容
      e.target.value = ''
    }
  }
  render() {
    return (
      <header className='header'>
        <h1>todos</h1>
        <input 
          className='new-todo' 
          placeholder='What needs to be done?' 
          onKeyUp={e => this.addTodo(e)} 
        />
      </header>
    )
  }
}

export default AddTodo
